.search-result {
  overflow-y: auto;
  color: #333;
  font-size: 15px;
  line-height: 1.2em;
  padding: 12px 24px;
  ul {
    margin: 0;
    overflow: hidden;
    li {
      float: left;
      width: 50%;
      a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        color: #333;
        padding: 10px 20px;
        &:hover {
          background: #f7f7f7;
        }
      }
    }
    &:empty {
      display: none;
    }
  }
  label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    padding: 0 20px 5px;
    margin: 0;
    font-size: 13px;
    color:$muted-color;
  }
}

// mobile
@media #{$small-and-down} {
  body.mobile-search-active {
    overflow: hidden;
    .mobile-search {
      display: block;
    }
  }
}

.mobile-search {
  display: none;
  overflow-y: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: $body-bg;
  font-size: 15px;
  color: $muted-color;
  padding-top: $navbar-height-mobile;
  .header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: $navbar-height-mobile;
    line-height: $navbar-height-mobile;
    @extend .z-depth-1;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 $card-padding-mobile;
    font-size: 16px;
    input {
      color: $off-black;
      flex: 1 1 auto;
      margin: 0 10px;
      -webkit-appearance: none;
      border: none;
      outline: none;
    }
  }
  .content {
    width: 100%;
    label {
      padding: $card-padding-mobile;
      font-size: 13px;
      display: block;
      text-align: center;
    }
    ul {
      width: 100%;
      margin: 0 0 2*$gutter-width;
      border-top: 1px solid #eaeaea;
      background: #fff;
      li {
        width: 100%;
        line-height: 20px;
        padding: $card-padding-mobile/2 $card-padding-mobile;
        border-bottom: 1px solid #e0e0e0;
        a {
          display: block;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: $muted-color;
        }
      }
    }
  }
}
